<template>
    <div id="teamShow">
      <ul>
        <li v-for="(team,index) in teams" :key="index" v-show="team.league=='yj'">
          <a :href="team.href+'?tname='+team.name">
            <div><img :src="getImageUrl(team.league,team.ico)" :alt="team.name"></div>
            <div><span v-text="team.name"></span></div></a>
        </li>
      </ul>
<el-form>
        <el-button type="primary" icon="el-icon-plus" size="mini" circle @click="plus(i)"></el-button>
        <el-button type="warning" icon="el-icon-minus" size="mini" circle @click="minus(i)"></el-button>
  <el-radio-group  v-model="person.sex">
    <el-radio  v-for="(sex,index) in sexs "    :label="sex.value" :key="index">{{sex.title}}</el-radio>
  </el-radio-group>
      <el-select v-model="person.favval">
        <el-option v-for="(fav,index) in favs" :label="fav.title" :value="fav.value"
        :key="fav.val">

      </el-option>

      </el-select>
</el-form>
    </div>
</template>

<script>
    // 定义给 上面模板使用的变量和方法 mvvm
    export default {
        name: "Basic",
        data(){
          return {teams:[
            {"name":"拜仁","league":"dj","ico":"br.png","href":"http://www.baidu.com"},{"name":"阿森纳","league":"yc","ico":"asn.png","href":"http://www.sina.com"},
              {"name":"ac米兰","league":"yj","ico":"ac.png","href":"/#/Basic2"},{"name":"西班牙人","league":"xj","ico":"xbyr.png","href":"/#/Navi"}],
            sexs:[{'value':'boy','title':'男'},{'value':'girl','title':'女'}],
          favs:[{'val':'football','title':'足球'},{'value':'basketball','title':'篮球'}],
person:{'favval':'basketball','sex':'girl'}
          }
        },
        methods:{
          getImageUrl:function (league,ico) {
            return  require("../../static/images/league/"+league+"/"+ico);//用加载资源的方式获取路径
          }
        },
      mounted() {//将当前vue对象暴露成全局变量  这样可以在控制台访问里面值，例如 要访问person.sex需要在
          //浏览器控制输入window.vue.person.sex 就可以得到值
          window.vue = this;
      }
    }
</script>

<style lang="stylus">
  #teamShow
     ul
       margin 0;padding 0;
       li 
        list-style-type none;float left
        img
           width  100px; height 100px
</style>
